<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .big {
       width: 600px;
       background-color: darkgrey; 
       height: 20px;
       border-radius: 10px;
    }
    .small {
       width: 0px;
       background-color:chartreuse;
       height: 20px;
       border-radius: 10px;
    }
    .shang { 
        border: 1px solid blue;
        height: 100px;
     }
    .xia { 
        margin-top: 50px ;
        border: 1px solid red;
        height: 100px;
    }
    span {
        margin: 5px;
        height: 90px;
        line-height: 100px;
        border: 1px solid #ccc;
        font-size: 30px;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0px 3px 1px #ccc;
    }
    </style>
</head>
<body>
    <h1> 模拟  多灵国 网站 </h1>
    <div class="big">
        <div class="small"></div>
    </div>
    <button onclick="myadd()"> 做题 </button>


    <div class="shang" onclick="myword(1)">

    </div>
    <div class="xia" onclick="myword(2)">
       <span>认识</span>
       <span>他</span>
       <span>穿鞋</span>
       <span>好看</span>
    </div>

</body>
<script>
// op=2下  op=1上
var shang=  document.querySelector('.shang');
var xia=  document.querySelector('.xia');
function myword(op){
    let span = event.srcElement ;
    if(span.tagName == 'SPAN'){
        if(op == 2 ){
            xia.removeChild( span );
            shang.appendChild( span );
        }else if( op== 1){
            shang.removeChild( span );
            xia.appendChild( span );
        }
    }
}

// let w = 0 ;
// function myadd(){
//     let a =  document.querySelector('.small')
//     w += 10;
//     a.style.width = w + 'px';
// }
</script>
</html>